A common question is: how do I hide or remove the featured image on a WordPress post.
It’s relatively easy to hide the featured image if you don’t want it displayed. You can even get fine-grained control over which posts or categories will hide the image.
There are several methods available:
CSS code (to hide, but not remove the featured image).PHP SnippetUse a PluginUse a theme – some themes like GeneratePress, Astra, and Genesis let you show or hide the featured image on a per-post basis. Why hide the featured image?There are a several reasons you might want to disable the featured image on all (or specific) WordPress Posts.
Content Type: Maybe a featured image doesn’t fit the content of the post, for example a list of coupons, a glossary, or an FAQ. More text above the fold – Featured images take up space. If you want to make sure your visitor reads the first few paragraphs of your content, removing the post image will push it higher up above the fold. Theme uses 1st image as featured – Some themes automatically take the first image inserted in the post and use it in place of a featured image, so there’s no reason to insert it a second time.You want text above your first image – Lots of conversion-focused bloggers want readers to see text above the fold, especially on mobile. By removing the featured image from the top of the post, you can insert it after the first few paragraphs to decrease your bounce rate. Hide the Featured Image with CSSPros: Easy, fast. No risk of white screen of death. Cons: Image still loaded (not displayed) by WordPress. Slight speed hit.This method works great if you aren’t obsessed with page speed, or you’re only removing the image on a handful of pages (and you don’t want to waste time messing with PHP).
1. Find the featured image classTo write our rule, we need the class your theme or plugin adds to all featured images.
To do that, you can use the ‘inspector tools’ built into your browser. Simply navigate to a post with a featured image, right-click and choose inspect.
You can then look at the html source to find the class-name assigned to your featured images. For example, on wpsuperstars.net, the Astra theme uses the .wp-post-image class.
2. Write your CSS ruleSo we can write our CSS rule. This rule below would remove all featured images from all posts:
.wp-post-image {display: none;}Code language: CSS (css)But you can also make it much more targeted. WordPress adds body classes for each category and even individual post IDs.
/* Remove featured image from the 'Books' category */.category-books .wp-post-image {display: none;}/* Remove the featured image from a specific post */.post-1523 .wp-post-image {display: none;}Code language: CSS (css)Hide the featured image with a pluginI prefer to use a plugin to control featured images on a per-post basis, rather than messing with PHP. Not only is it easier, but you don’t risk the ‘white screen of death‘ if you forget a semicolon.
The best free plugin I’ve found is Conditionally Display Featured Image. This should work for any theme that uses WordPress’s core functions to display the featured image.
You’ll get a little checkbox to disable the image on individual posts. It works with both Gutenberg and the classic editor.
Note: If you’re using the Genesis Framework, try this plugin instead.
Use a Theme that gives you controlMany of the most popular WordPress themes give you full control.
Here are some examples of themes that let you disable featured images on a site-level or post-level basis:
Generatepress Astra KadenceWPHello ThemeBeaver Builder ThemeGenesisX ThemeAvadaFor example, the GeneratePress theme (which we use here at BTW) lets you disable the featured image on a per post basis.
Just go to the post settings (right sidebar while in your post editor) and scroll down to the Layout section.
Then under Disable Elements, select the Featured Image checkbox.
Astra and Genesis offer similar functionality. You can also get control over archive pages as well.
Hide it with PHPI put this method last because:
It’s the most likely to break something on your siteThe PHP required may be different for some themesWhere to put your PHP codeMost tutorials recommend you add custom PHP to the functions.php file of your theme or child theme.
There are several options I think are better:
Custom PHP functionality of your theme: GeneratePress and Astra both have a ‘hooks’ feature that lets you add custom PHP, including conditionals. Code Snippets Plugin: Code Snippets is a great free plugin to add custom HTML, Javascript and PHP to your site. It can even limit the risk of breaking your site from invalid php. Custom Functionality Plugin: Instead of tying custom PHP to your theme, hook it in with a simple plugin wrapper. Here’s how. Write your PHP FunctionHere’s an example function, which filters the post thumbnail html, and returns an empty string if it’s a post. You could also add a conditional for a specific category or custom post type if you wanted.
function we_remove_post_image( $html, $post_id, $post_image_id ) {if(is_single()) {return '';} elsereturn $html;}add_filter( 'post_thumbnail_html', 'we_remove_post_image', 10, 3 );Code language: PHP (php)SummaryThere are several methods available to remove (or hide) the featured image on WordPress posts.
If you want to hide them on may posts, use a plugin or your theme’s functionality.
To hide the post image on just a few posts, or a specific category, again try using your Theme’s functionality first. If your theme doesn’t have this ability, this simple CSS code is a good backup option.
Recommended Themes:
Generatepress (Pro)Astra (Pro)NevePlugins to hide the featured image:
Conditionally display featured image on singular posts and pages